<!--  -->
<template>
  <div v-loading="loading">
    <form-view
      class="task-tab-container task-view-containner"
      :fields="fields"
      :value="dataInfo"
    >
      <div slot="name"></div>
      <template slot="customer" slot-scope="{ value }">
        <div class="form-view-row" v-if="value">
          <label>{{ $t('product.detail.catalogView.type.customerName') }}</label>
          <div class="form-view-row-content link" @click="openCustomer">
            {{ dataInfo.customerName }}
          </div>
        </div>
        <div class="form-view-row" v-if="value && hasLinkman">
          <label>{{ $t('product.detail.catalogView.type.linkman') }}</label>
          <div class="form-view-row-content">
            {{
              dataInfo.linkman &&
                dataInfo.linkman.name + " " + dataInfo.linkman.phone
            }}
          </div>
        </div>
        <form-address-view
          v-if="value && hasAddress"
          :field="{ displayName: $t('common.base.address') }"
          :value="dataInfo.address"
        >
        </form-address-view>
      </template>

      <template slot="createTime" slot-scope="{ value }">
        <div class="form-view-row" v-if="value">
          <label>{{ $t('common.base.createTime') }}</label>
          <div class="form-view-row-content">
            <span>{{ value | fmt_datetime }}</span>
          </div>
        </div>
      </template>

      <template slot="product_menu_part">
        <div class="normal-form-view-box">
          <div class="normal-title-2 mar-b-8">
            <div class="flex-1 ">{{ $t('product.detail.catalogView.type.part') }}</div>
          </div>

          <mini-table
            :id="propData.catalogId"
            data-type="part"
            page-type="view"
            v-if="flashPartType"
          />
        </div>
      </template>
      <template slot="product_menu_wiki">
        <div class="normal-form-view-box">
          <div class="normal-title-2">
            <div class="flex-1 mar-b-8">{{ $t('product.detail.catalogView.type.wiki') }}</div>
          </div>
          <mini-table
            :id="propData.catalogId"
            data-type="wiki"
            page-type="view"
            v-if="flashProductType"
          />
        </div>
      </template>
    </form-view>

    <el-button v-if="isShowDisassociationBtn" @click="unRelationCatalog" type="danger" class="unbind">{{$t('product.btns.disassociate')}}</el-button>
  </div>
</template>

<script>
import { getProductMenuField, getPageInfo, unRelationCatalog } from "@src/api/ProductV2Api";
import MiniTable from "@src/modules/productV2/productMenu/WorkTree/compoment/MiniTable.vue";
import * as FormUtil from '@src/component/form/util'

export default {
  name: "catalog-view",
  inject: ["changeDataInfo"],
  props: {
    propData: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    MiniTable,
  },
  data() {
    return {
      flashPartType: true,
      flashProductType: true,
      fields: [],
      dataInfo: {},
      loading: false,
    };
  },
  computed: {
    // 是否显示取消关联的按钮
    isShowDisassociationBtn() {
      return this.dataInfo?.id || false
    }
  },
  created() {
    getProductMenuField()
      .then((res) => {
        const { code, result, message } = res;
        if (code == 0) {
          // 过滤产品物料清单
          const fields = (result || []).filter(item => {
            return item.fieldName != 'productMaterialsBill'
          });
          const sortedFields = fields.sort((a, b) => a.orderId - b.orderId);
          this.fields = sortedFields;
        } else {
          this.$notify.error({
            title: this.$t('common.base.tip.httpIsError'),
            message,
            duration: 2000,
          });
        }
      })
      .catch((error) => {});
  },
  mounted() {
    this.resetPage();
  },
  methods: {
    unRelationCatalog(){
      this.$confirm(this.$t('product.detail.catalogView.tips.tip1'),this.$t('common.base.toast'),{
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning'
      }).then(()=>{
        const params={
          productId:this.propData.id
        }
        unRelationCatalog(params).then(res=>{
          if(res.code===0){
            this.$emit('unRelationSuc');
          }else{
            this.$notify.close();
            this.$notify.error({
              title: this.$t('common.base.requestError'),
              message: res.message,
              duration: 2000,
            });
          }
        });
      }).catch(()=>{})
    },
    resetPage(id) {
      if (!this.propData.catalogId && !id) return;
      this.loading = true;
      getPageInfo({
        id: id || this.propData.catalogId,
      })
        .then(async (res) => {
          if (res.code == 0) {
            res.result.catalogInfo.productVideo = res.result.catalogInfo.productVideo || [];
            res.result.catalogInfo.productPic = res.result.catalogInfo.productPic || [];
            res.result.catalogInfo.productExplain = res.result.catalogInfo.productExplain || [];
            if (res.result.selectField.length) {
              this.fields.map((item) => {
                if ((!item.isSystem && res.result.selectField.some(item_=>item_ == item.id)))
                  item["isHidden"] = true;
                else item["isHidden"] = false;
                return item;
              });
            }
            this.changeDataInfo({
              pathName: res.result.catalogInfo.pathName,
              catalogPathName: res.result.catalogInfo.pathName.replace(new RegExp("/", "g"), " / ") || ""
            }, 'pathName');

            res.result.catalogInfo = await FormUtil.initRichTextContent(this.fields, res.result.catalogInfo)

            this.$set(this, "dataInfo", res.result.catalogInfo);
          } else {
            this.$notify.error({
              title: this.$t('common.base.tip.httpIsError'),
              message: res.message,
              duration: 2000,
            });
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.unbind{
  margin: 0 0 10px 30px;
  ::v-deep span{
    font-size: 12px;
  }
}
</style>
